<template>
  <div class="my-card">
    <div class="card-title no-select">
      <div @dblclick="dbTitle" v-if="!visible">{{ formItem.title }}</div>
      <el-input v-else v-model="formItem.title" @blur="visible = false"></el-input>
      <el-icon @click="del"><Close /></el-icon>
    </div>
    <div class="card-body">
      <el-link>
        请选择审批人
      </el-link>
    </div>
  </div>
  <div class="card-footer">
    <div class="yes">
      <div>同意</div>
      <div class="add">
        <el-popover
            placement="top-start"
            :width="300"
            trigger="click"
        >
          <el-button icon="edit" @click="addApprove('yesNext')">审批</el-button>
          <el-button icon="chat-square" @click="addSend('yesNext')">抄送</el-button>
          <el-button icon="close" @click="addEnd('yesNext')">结束</el-button>
          <template #reference>
            <el-icon size="30">
              <CirclePlus/>
            </el-icon>
          </template>
        </el-popover>
      </div>
      <Tag v-if="formItem.yesNext" :form-item="formItem.yesNext"></Tag>
      <div v-else class="not-data-card"></div>
    </div>
    <div class="no">
      <div>拒绝</div>
      <div class="add">
        <el-popover
            placement="top-start"
            :width="300"
            trigger="click"
        >
          <el-button icon="edit" @click="addApprove('noNext')">审批</el-button>
          <el-button icon="chat-square" @click="addSend('noNext')">抄送</el-button>
          <el-button icon="close" @click="addEnd('noNext')">结束</el-button>
          <template #reference>
            <el-icon size="30">
              <CirclePlus/>
            </el-icon>
          </template>
        </el-popover>
      </div>
      <Tag v-if="formItem.noNext" :form-item="formItem.noNext"></Tag>
      <div v-else class="not-data-card"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import Tag from './Tag.vue'
import bus from "../bus";
const props = defineProps<{
  formItem: any
}>()
const visible = ref(false)
const dbTitle = () => {
  if (props.formItem.type == "Workflow" || props.formItem.type == "Finish") return
  visible.value = true
}

const addApprove = (res:any) => {
  bus.emit("addApprove",{
    id:props.formItem.id,
    key:res
  })
}
const addSend = (res:string) => {
  bus.emit("addSend",{
    id:props.formItem.id,
    key:res
  })
}
const addEnd = (res:string) => {
  bus.emit("addEnd",{
    id:props.formItem.id,
    key:res
  })
}
const del = () => {
  bus.emit("del",props.formItem.id)
}

</script>

<style lang="less" scoped>
.my-card {
  margin: 20px;
  box-shadow: 0px 0px 10px 3px #9f9f9f;
  width: 200px;
  border-radius: 6px;
  &:before{

  }
  .card-title {
    border-radius: 6px 6px 0 0;
    padding: 4px;
    color: aliceblue;
    background-color: #ff8900;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
  }
}
.card-footer{
  min-width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  .yes{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    &:before{
      content:"";
      width:50%;
      height: 1px;
      background: #9f9f9f;
      position: absolute;
      right: 0%;
      top: 0%;
    }
  }
  .no{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    &:before{
      content:"";
      width:50%;
      height: 1px;
      background: #9f9f9f;
      position: absolute;
      left: 0%;
      top: 0%;
    }
  }
}
.add {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  :after{
    position: absolute;
    content: "";
    width: 1px;
    height: 60px;
    background: #bbbbbb;
  }
}
.not-data-card{
  min-width: 200px;
}
</style>